<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>欢迎</el-breadcrumb-item>
    </el-breadcrumb>

  <div>
    <el-row :gutter="200">
  <el-col :span="8">
    <el-card :body-style="{ height: '150px' }" >
      <el-row :gutter="20">
      <el-col :span="10">
        <img src="../../assets/img/today.png">
      </el-col>
      <el-col :span="14"> 
     <el-row :gutter="24"> <el-col :span="12">今日访问量</el-col></el-row>
     <el-row style="margin-top: 50px" :gutter="24"> <el-col :span="12">{{ this.today }}</el-col></el-row>
     </el-col> 
      </el-row>
    </el-card>
  </el-col>
  <el-col :span="8">
    <el-card :body-style="{ height: '150px' }" >
      <el-row :gutter="20">
      <el-col :span="10">
        <img src="../../assets/img/ip.png">
      </el-col>
      <el-col :span="14"> 
     <el-row :gutter="24"> <el-col :span="12" >总IP访问数</el-col></el-row>
     <el-row style="margin-top: 50px" :gutter="24"> <el-col :span="12">{{ this.totalIp }}</el-col></el-row>
     </el-col> 
      </el-row>
    </el-card>
  </el-col>
  <el-col :span="8">
    <el-card :body-style="{ height: '150px' }" >
      <el-row :gutter="20">
      <el-col :span="10">
        <img src="../../assets/img/total.png">
      </el-col>
      <el-col :span="14"> 
     <el-row :gutter="24"> <el-col :span="12">总访问量</el-col></el-row>
     <el-row style="margin-top: 50px" :gutter="24"> <el-col :span="12">{{ this.total }}</el-col></el-row>
     </el-col> 
      </el-row>
    </el-card>
  </el-col>
</el-row>     
    </div>
  <div class="divStyle">
    <img class="centerImg" src="../../assets/svg/Group171.svg">
  <div class="centerText">
        <h2 style="padding-left: 120px;">hms后台管理系统</h2>
        <span style="padding-left: 20px;">一个简单的权限脚手架(springboot+vue)......</span>
  </div>   
  </div>
  </div>
</template>

<script>
export default {
  data () {
    return{
      total: 0,
      totalIp: 0,
      today: 0
    }
  },
  created (){
    this.getLoginNum()
  },
  methods: {
    getLoginNum(){
      this.$api.log.getLoginNum().then(res => {
        this.total = res.data.total
        this.totalIp = res.data.totalIp
        this.today = res.data.today
      })
    }
  }
}
</script>
<style lang="less" scoped>
.divStyle {
  height: 400px;
  position: relative;
  margin-bottom: 150px;
}
.centerText {
    position: absolute;
top: 110%;
left: 35%;
}
.centerImg {
  position: absolute;
top: 20%;
left: 35%;
}
.el-card {
  margin-top: 15px;
  margin-bottom: 15px;
}
.el-row {
  text-align: center;
  font-weight: 900
}
.smallCard {
  height: 150px;
}
.middleCard {
  height: 300px;
}
.el-steps {
  padding-top: 50px;
  padding-left: 300px;
}
</style>
